<template>
    <view class="luch-audio__warp">
        <view class="luch-audio__cover" :class="{ 'luch-audio--cover-bg': !poster }">
            <image :src="poster" v-if="poster" class="luch-audio__cover-img"></image>
            <view
                class="luch-audio__play-btn"
                :class="{ 'luch-audio--btn-pause': videoIsPlay }"
                @click="handleBtnClick"
            ></view>
        </view>
        <view class="luch-audio__audio-con">
            <view class="luch-audio__audio-info">
                <text class="luch-audio__audio-title luch-audio--text-eill">{{ name }}</text>
                <text class="luch-audio__audio-author luch-audio--text-eill">{{ author }}</text>
            </view>
            <view class="luch-audio__audio-time">{{ audioTimeUpdate }}</view>
        </view>
    </view>
</template>

<script>
/**
 * luch-audio
 * @module luch-audio
 * @Author lu-ch
 * @Date 2022-07-14
 * @Email webwork.s@qq.com
 * @description 音频播放组件，使用了createInnerAudioContext
 */
/**
 * Props itemsProps
 * @prop {Boolean} play - 是否播放，双向绑定，绑定时需使用.sync 如果为true 则播放，为false 则暂停
 * ... 其他api同文档 （https://uniapp.dcloud.io/api/media/audio-context?id=createinneraudiocontext）
 */
/**
 * 将秒转换为 分:秒
 * @param {Number} s - 秒数
 */
function sToHs(s) {
    //计算分钟
    //算法：将秒数除以60，然后下舍入，既得到分钟数
    let h;
    h = Math.floor(s / 60);
    //计算秒
    //算法：取得秒%60的余数，既得到秒数
    s = s % 60;
    //将变量转换为字符串
    h += '';
    s += '';
    //如果只有一位数，前面增加一个0
    h = h.length === 1 ? '0' + h : h;
    s = s.length === 1 ? '0' + s : s;
    return h + ':' + s;
}
export default {
    name: 'ComAudio',
    props: {
        // 是否播放或暂停
        play: {
            type: Boolean,
            default: false,
        },
        // 播放src
        src: {
            type: String,
        },
        poster: {
            type: String,
            default: '/static/image/fox.png',
        },
        name: {
            type: String,
            default: '未知音频',
        },
        author: {
            type: String,
            default: '硅基九尾狐AI应用商店',
        },
        autoplay: {
            type: Boolean,
            // default: false
        },
        loop: {
            type: Boolean,
            // default: false
        },
        // #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-LARK || MP-JD || MP-KUAISHOU
        obeyMuteSwitch: {
            type: Boolean,
            // default: true
        },
        // #endif
        // 初始化回调
        initAudio: {
            type: Function,
        },
        // 自定义组件标识
        index: {
            type: [String, Number],
        },
    },
    data() {
        return {
            audioTimeUpdate: '00:00',
            videoIsPlay: false,
            // innerAudioContext: ''
        };
    },
    watch: {
        play(n) {
            // this.videoIsPlay = play
            if (n) {
                !this.videoIsPlay && this.audioPlay();
            } else {
                this.videoIsPlay && this.audioPause();
            }
        },
        src() {
            this.audioDestroy();
            this.contextInit();
        },
    },
    created() {
        this.contextInit();
    },
    beforeUnmount() {
        this.audioDestroy();
    },
    methods: {
        audioPlay() {
            this.innerAudioContext && this.innerAudioContext.play();
        },
        audioPause() {
            this.innerAudioContext && this.innerAudioContext.pause();
        },
        audioOnPlay() {
            this.videoIsPlay = true;
            this.$emit('update:play', true);
        },
        audioOnPause() {
            this.videoIsPlay = false;
            this.$emit('update:play', false);
        },
        audioDestroy() {
            this.innerAudioContext &&
                this.innerAudioContext.destroy &&
                this.innerAudioContext.destroy();
            this.audioPropInit();
        },
        audioControls() {
            if (this.videoIsPlay) {
                this.audioPause();
            } else {
                this.audioPlay();
            }
        },
        handleBtnClick() {
            // this.videoIsPlay = !this.videoIsPlay
            this.audioControls();
            this.$emit('update:play', this.videoIsPlay);
        },
        contextInit() {
            let that = this;
            that.$emit('update:play', false);
            if (!that.src) {
                if (process.env.NODE_ENV !== 'production') {
                    console.warn(`[luch-audio warn]: 'src' 为空`);
                }
                return;
            }
            let innerAudioContext = uni.createInnerAudioContext();
            innerAudioContext.autoplay = that.autoplay;
            innerAudioContext.loop = that.loop;
            // #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-LARK || MP-JD || MP-KUAISHOU
            if (typeof that.obeyMuteSwitch === 'boolean') {
                innerAudioContext.obeyMuteSwitch = that.obeyMuteSwitch;
            }
            // #endif
            innerAudioContext.onPlay((...arg) => {
                that.audioTimeUpdate = sToHs(Math.floor(innerAudioContext.currentTime));
                that.audioOnPlay();
                that.$emit('onPlay', ...arg);
            });
            innerAudioContext.onPause((...arg) => {
                that.audioOnPause();
                that.$emit('onPause', ...arg);
            });
            innerAudioContext.onEnded((...arg) => {
                that.audioOnPause();
                that.$emit('onEnded', ...arg);
            });
            innerAudioContext.onTimeUpdate((...arg) => {
                that.audioTimeUpdate = sToHs(Math.floor(innerAudioContext.currentTime));
                that.$emit('onTimeUpdate', ...arg);
            });
            innerAudioContext.onError((...arg) => {
                that.$emit('onError', ...arg);
            });
            innerAudioContext.src = that.src;
            if (that.initAudio) {
                that.initAudio(innerAudioContext, { src: that.src, index: that.index });
            }
            this.innerAudioContext = innerAudioContext;
        },
        audioPropInit() {
            this.audioTimeUpdate = '00:00';
            this.videoIsPlay = false;
        },
    },
};
</script>

<style lang="scss" scoped>
.luch-audio--text-eill {
    /*超出省略号*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.luch-audio__warp {
    display: flex;
    overflow: hidden;
    height: 67px;
    border-radius: 3px;
    border: 1px solid #e0e0e0;
}
.luch-audio__cover {
    position: relative;
    flex-shrink: 0;
    width: 65px;
    height: 100%;
    &.luch-audio--cover-bg {
        background-color: #e6e6e6;
    }
    .luch-audio__cover-img {
        width: 100%;
        height: 100%;
    }
    .luch-audio__play-btn {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 24px;
        height: 24px;
        transform: translateX(-50%) translateY(-50%);
        border-radius: 50%;
        background-size: 100% 100%;
        background-image: url('');
        &.luch-audio--btn-pause {
            background-image: url('');
        }
    }
}
.luch-audio__audio-con {
    position: relative;
    flex: 1;
    display: flex;
    width: 0;
    padding: 0 15px 0 8px;
    align-items: center;
    background-color: #fcfcfc;
    .luch-audio__audio-info {
        width: 100%;
    }
    .luch-audio__audio-title {
        display: block;
        padding-bottom: 7px;
        padding-right: 25px;
        font-size: 14px;
        color: #353535;
    }
    .luch-audio__audio-author {
        display: block;
        font-size: 12px;
        color: #888888;
    }
    .luch-audio__audio-time {
        position: absolute;
        right: 15px;
        top: 6px;
        font-size: 13px;
        color: #9d9d9d;
    }
}
</style>
